<template>
	<view class="bg">
		<!-- 头部 -->
		<view class="pt-40  pb-20 flex flex-between">
			<view class="" style="width: 700px;height: 240px;position: relative;">
				<image class="photo myWalle_bg" src="../../static/my/qianbao_bg.png" mode="widthFix">
				</image>

				<view class="" style="position: absolute;margin: 60rpx 0 0 80rpx;line-height: 100rpx;">
					<view class="flex" style="padding-right: 70rpx;">
						<view class="white">
							我的余额
						</view>
						<view class="white">
							积分
						</view>
					</view>
					<view class="flex" style="padding-right: 70rpx;">
						<view class="white">
							{{walletAccount}}(元)
						</view>
						<view class="white">
							{{integral}}
						</view>
					</view>
					<view class="flex1"
						style="justify-content: space-around;width: 700rpx; margin:80rpx 0 0 -40rpx ;font-size: 34rpx;font-weight: bold;">
						<view class="white" @click="toRecharege" >
							充值
						</view>
						<view class="white" @click="toWithdraw">
							提现
						</view>
					</view>
				</view>
			</view>
			<!-- 		<view class="mb-40  size-26">
				我的余额
				<view class="bold red mt-50" style="font-size:56rpx;">
					{{walletAccount}}
				</view>
			</view>
			<view class="">
				<button type="default" class="topBtn"  @click="toRecharege">充值</button>
				<button type="default" class="topBtn mt-40" @click="toWithdraw">提现</button>
			</view> -->
		</view>
		<!-- 列表 -->
		<view class="plr-30 ptb-30 btmWrap ">
			<!-- 筛选 -->
			<view class="flex mb-30 ">
				<u-field @click="chooseDate(0)" class="midInput" placeholder-style="color:#cdcdcd" v-model="start_time"
					label-width="20" placeholder="开始时间" :disabled="true" :border-top="false" :border-bottom="false">
					<u-icon name="calendar" color="#cdcdcd" size='30' slot="icon"></u-icon>
				</u-field>
				<view class="bold size-26 mlr-20">
					至
				</view>
				<u-field class="midInput" @click="chooseDate(1)" placeholder-style="color:#cdcdcd" v-model="end_time"
					label-width="20" placeholder="结束时间" :disabled="true" :border-top="false" :border-bottom="false">
					<u-icon name="calendar" color="#cdcdcd" size='30' slot="icon"></u-icon>
				</u-field>
				<view class="bold size-26 buttoncheck" @click="toSearch">
					确定
				</view>
			</view>
			<!-- 列表 -->
			<view v-if="list.length>0">
				<view class="recordItem mb-20 bg radius-16 ptb-30 plr-30" v-for="(item,index) in list" :key="index">
					<view class="flex size-28 bold ">
						<view class="">
							{{item.bill_type}}
						</view>
						<view>
							<text v-if="item.type==1" class="">+{{item.account}}</text>
							<text v-if="item.type==2" class="">-{{item.account}}</text>
						</view>
					</view>
					<view class="flex mt-30  size-24">
						<view class=" ">
							时间
						</view>
						<view class="">
							{{item.create_time}}
						</view>
					</view>
				</view>
			</view>
			<empty v-else></empty>
		</view>
		<!-- 时间筛选 -->
		<u-calendar v-model="dateShow" @change="submitDate" mode="date"></u-calendar>
	</view>
</template>

<script>
	import tab from "../../components/tab.vue"
	import empty from "../../components/empty.vue"
	export default {
		components: {
			tab,
			empty
		},
		data() {
			return {
				flag: false,
				page: 1,
				start_time: '',
				end_time: '',
				dateShow: false,
				info: '',
				list: [],
				dateType: 0,
				walletAccount: 0,
				integral: 0,
				status: 'more'
			}
		},
		onLoad() {
			this.$http('api/account/account').then(res => {
				this.walletAccount = res.account;
				this.integral=res.integral
			})
		},
		onShow() {
			this.init();
		},
		onHide() {
			this.list = [];
			this.flag = false;
			this.status = 'more';
			this.page = 1;
		},
		onReachBottom() {
			if (!this.flag) {
				this.status = "loading";
				this.page++;
				this.init();
			}
		},
		onPullDownRefresh() {
			this.flag = false;
			this.page = 1;
			this.collectList = [];
			this.init();
		},
		methods: {
			toRecharege() {
				uni.navigateTo({
					url: "./recharge"
				})
			},
			init() {
				this.$http('api/bill/billList', {
					page: this.page,
					pagesize: 10,
					start_time: this.start_time,
					end_time: this.end_time
				}).then(res => {
					// let data = res.data;
					// if (this.list >=res.count) {
					// 	this.status = "nomore"
					// } else {
					// 	this.page = this.page + 1
					// 	this.status = "loadmore"
					// }
					// this.list = this.list.concat(data)
					// uni.stopPullDownRefresh();
					uni.stopPullDownRefresh();
					let data = res.data;
					if (data.length == 0) {
						this.flag = true;
						this.status = 'noMore'
					} else {
						this.list = this.list.concat(data);
						if (data.length < 10) {
							this.flag = true;
							this.status = 'noMore'
						}
					}
				})
			},
			toWithdraw() {
				uni.navigateTo({
					url: "./withdraw"
				})
			},
			// 选择时间
			chooseDate(type) {
				this.dateShow = true;
				this.dateType = type;
			},
			submitDate(e) {
				if (this.dateType == 0) {
					this.start_time = e.result;
				} else {
					this.end_time = e.result;
				}
			},
			toSearch() {
				this.page = 1;
				this.list = [];
				this.init();
			}
		}
	}
</script>

<style lang="less" scoped>
	.buttoncheck {
		background: #2D8BEE;
		width: 90px;
		text-align: center;
		border-radius: 25px;
		height: 40px;
		line-height: 40px;
		color: #fff;
	}

	.myWalle_bg {
		position: absolute;
	}

	page {
		background-color: #F5F5F5 !important;
	}

	.topBtn {
		width: 140rpx;
		height: 50rpx;
		background: #44ACFF;
		border-radius: 25rpx;
		border: 0 none;
		color: #fff;
		font-size: 24rpx;
		line-height: 50rpx;
	}

	.btmWrap {
		border-radius: 30rpx 30rpx 0 0;
		background: #fff;

	}

	::v-deep  .midInput {
		width: 280rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 18rpx 0 0 30rpx !important;
	}
</style>
